<script type="text/javascript">
    (function () {
        // convert to i18 text
        function c_ (x) {
            return RED._('@flowfuse/node-red-dashboard/ui-markdown:ui-markdown.' + x)
        }

        RED.nodes.registerType('ui-markdown', {
            category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
            color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.dark'),
            defaults: {
                group: { type: 'ui-group', required: true },
                name: { value: '' },
                order: { value: 0 },
                width: {
                    value: 0,
                    validate: function (v) {
                        let valid = true
                        if (this.templateScope !== 'global') {
                            const width = v || 0
                            const currentGroup = $('#node-input-group').val() || this.group
                            const groupNode = RED.nodes.node(currentGroup)
                            valid = !groupNode || +width <= +groupNode.width
                            $('#node-input-size').toggleClass('input-error', !valid)
                        }
                        return valid
                    }
                },
                height: { value: 0 },
                content: { value: '# Markdown Content\n\nGoes here...' },
                className: { value: '' }
            },
            inputs: 1,
            outputs: 1,
            icon: 'ui-markdown.png',
            paletteLabel: 'markdown',
            label: function () { return this.name || 'markdown' },
            labelStyle: function () { return this.name ? 'node_label_italic' : '' },
            oneditprepare: function () {
                if (RED.editor.__debug === true) {
                    console.log('ui-markdown: oneditprepare')
                }
                // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
                // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
                if (RED.nodes.subflow(this.z)) {
                    // change inputs from hidden to text & display them
                    $('#node-input-width').attr('type', 'text')
                    $('#node-input-height').attr('type', 'text')
                    $('div.form-row.nr-db-ui-element-sizer-row').hide()
                    $('div.form-row.nr-db-ui-manual-size-row').show()
                } else {
                    // not in a subflow, use the elementSizer
                    $('div.form-row.nr-db-ui-element-sizer-row').show()
                    $('div.form-row.nr-db-ui-manual-size-row').hide()
                    $('#node-input-size').elementSizer({
                        width: '#node-input-width',
                        height: '#node-input-height',
                        group: '#node-input-group'
                    })
                }
                this.editor = RED.editor.createEditor({
                    id: 'node-input-content-editor',
                    mode: 'ace/mode/markdown',
                    value: $('#node-input-content').val()
                })
                RED.library.create({
                    url: 'uimarkdown', // where to get the data from
                    type: 'ui-markdown', // the type of object the library is for
                    editor: this.editor, // the field name the main text body goes to
                    mode: 'ace/mode/markdown',
                    fields: ['name']
                })

                this.editor.focus()

                RED.popover.tooltip($('#node-markdown-expand-editor'), c_('label.expand'))

                // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
                $('.ui-node-popover-title').tooltip({
                    show: {
                        effect: 'slideDown',
                        delay: 150
                    }
                })
            },
            oneditsave: function () {
                $('#node-input-content').val(this.editor.getValue())
                this.editor.destroy()
                delete this.editor
            },
            oneditcancel: function () {
                this.editor.destroy()
                delete this.editor
            },
            oneditresize: function (size) {
                const rows = $('#dialog-form>div:not(.node-text-editor-row)')
                let height = $('#dialog-form').height()
                for (let i = 0; i < rows.size(); i++) {
                    height = height - $(rows[i]).outerHeight(true)
                }
                const editorRow = $('#dialog-form>div.node-text-editor-row')
                height -= (parseInt(editorRow.css('marginTop')) + parseInt(editorRow.css('marginBottom')))
                $('.node-text-editor').css('height', height + 'px')
                this.editor.resize()
            }
        })
    })()
</script>

<script type="text/html" data-template-name="ui-markdown">
    <div class="form-row">
        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
        <input style="flex-grow:1" type="text" id="node-input-group">
    </div>
    <div class="form-row nr-db-ui-element-sizer-row">
        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-markdown.label.size">Size</label>
        <button class="editor-button" id="node-input-size"></button>
    </div>
    <div class="form-row nr-db-ui-manual-size-row">
        <label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-markdown.label.width">Width</label>
        <input type="hidden" id="node-input-width">
    </div>
    <div class="form-row nr-db-ui-manual-size-row">
        <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-markdown.label.height">Height</label>
        <input type="hidden" id="node-input-height">
    </div>
    <div class="form-row">
        <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
        <div style="display: inline;">
            <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
            <a
                data-html="true"
                title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
                class="red-ui-button ui-node-popover-title"
                style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
                <i style="font-family: ui-serif;">fx</i>
            </a>
        </div>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <div style="flex-grow: 1">
            <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
        </div>
    </div>
    <div class="form-row" style="margin-bottom:0px;">
        <label for="node-input-content"><i class="fa fa-copy"></i> Content</label>
        <input type="hidden" id="node-input-content">
    </div>
    <div class="form-row node-text-editor-row" style="display: block;">
        <div style="height:250px; min-height:100px" class="node-text-editor" id="node-input-content-editor" ></div>
    </div>
</script>